﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageCutAndPrint.aspx.cs" Inherits="Web.ImageCutAndPrint" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="x-ua-compatible" content="IE=7"/>
    <link type="text/css" rel="Stylesheet" href="App_Themes/NewPage/Styles/layout.css" />
    <link href="App_Themes/NewPage/Styles/sexybuttons.css" rel="stylesheet" type="text/css" />
    <link href="Easy_UI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <link href="Styles/imgareaselect-default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Javascript/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="Easy_UI/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="Javascript/jquery.imgareaselect.min.js"></script>
    <style type="text/css" media="print">
            .noprint { display : none }
            .imgareaselect-border1 {display : none}
            .imgareaselect-border2 {display : none}
            .imgareaselect-border3 {display : none}
            .imgareaselect-border4 {display : none}
            .imgareaselect-handle {display : none}
            .imgareaselect-outer {display : none}
     </style>
     <style type="text/css">
            .imgoverflow{overflow:hidden;}
     </style>
   <script type="text/javascript">
       var imgAreaSelect;
       var orgrinaImageHeight;
       var orgrinaImageWidth;
       $(document).ready(function () {
           imgAreaSelect = $('#selectedImg').imgAreaSelect({
               handles: true,
               instance: true,
               keys: true
           });
           $(document).bind('contextmenu', contextmenuOpen);
       });
       $(window).load(function () {
           orgrinaImageHeight = $('#selectedImg').height();
           orgrinaImageWidth = $('#selectedImg').width();
       });
       function contextmenuOpen(event) {
           var event = event || window.event;
           event.preventDefault();
           $('#rightMenu').attr('style', 'left: ' + event.clientX + 'px; top: ' + event.clientY + 'px;display: block; position: fixed; z-index: 999;zoom: 1;')
           var flag = false;
           if (imgAreaSelect != null) {
               var imgSeletion = imgAreaSelect.getSelection();
               if (imgSeletion != null && imgSeletion.width > 0 && imgSeletion.height > 0) {
                   $('#btnZoomIn').attr('disabled', 'disabled');
                   $('#btnZoomOut').attr('disabled', 'disabled');
                   flag = true;
               }
           }
           if(!flag){
            $('#btnZoomIn').removeAttr('disabled');
            $('#btnZoomOut').removeAttr('disabled');
           }
           $("#rightMenu").show();
           $(document).unbind('click', contextmenuOpenHide);
           $(document).bind('click', contextmenuOpenHide);
       }
       function contextmenuOpenHide(event) {
           var targetId = $(event.target).attr('id')
           if (targetId == 'btnZoomOut' || targetId == 'btnZoomIn') {
               return;
           }
           $("#rightMenu").hide();
           $(document).unbind('click', contextmenuOpenHide);
       }
       function zoomOut() {
           $('#selectedImg').width($('#selectedImg').width() * 1.1);
           $('#selectedImg').height($('#selectedImg').height() * 1.1);
       }
       function zoomIn() {
           var oldWidth = $('#selectedImg').width();
           var oldHeight = $('#selectedImg').height();
           var newWidth = oldWidth * 0.9;
           var newHeight = oldHeight * 0.9;
           $('#selectedImg').width(newWidth);
           $('#selectedImg').height(newHeight);
           //var rightMenuTop = $("#rightMenu").offset().top;
           //var rightMenuLeft = $("#rightMenu").offset().left;
           //var rightMenuWidth = $("#rightMenu").width();
           //var rightMenuHeight = $("#rightMenu").height();
           //if (rightMenuTop + rightMenuHeight > $('body').height() && rightMenuLeft + rightMenuWidth > $('body').width()) {
           //    $("#rightMenu").css('left', (rightMenuLeft - (oldWidth - newWidth)) + 'px');
           //    $("#rightMenu").css('top', (rightMenuTop - (oldHeight - newHeight)) + 'px');
           //}
       }
       function zoomOriginal() {
           $('#selectedImg').width(orgrinaImageWidth);
           $('#selectedImg').height(orgrinaImageHeight);
           if (imgAreaSelect != null) {
               var imgSeletion = imgAreaSelect.getSelection();
               if (imgSeletion != null && imgSeletion.width > 0 && imgSeletion.height > 0) {
                   imgAreaSelect.cancelSelection();
               }
           }
       }
   </script>

   <script type="text/javascript">
       function printSelectedImg() {
           try{
               var imgSeletion;
               $("#rightMenu").hide();
               if (imgAreaSelect != null) {
                   imgSeletion = imgAreaSelect.getSelection();
                   if (imgSeletion != null && imgSeletion.width > 0 && imgSeletion.height > 0) {
                       var left = $('.imgareaselect-selection').offset().left - 10;
                       var top = $('.imgareaselect-selection').offset().top - 10;
                       var width = $('.imgareaselect-selection').width();
                       var height = $('.imgareaselect-selection').height();
                       $('#imgContainer').width(width);
                       $('#imgContainer').height(height);
                       $('#selectedImg').css('left', 0 - left)
                       $('#selectedImg').css('top', 0 - top);
                       //$('#imgContainer').css('left', left);
                       //$('#imgContainer').css('top', top);
                       //var imgContainerLeft = 10 ;
                       //var imgContainerTop = 10;
                       //if (width < $('body').width()) {
                       //    imgContainerLeft = ($('body').width() - width) / 2.0;
                       //}
                       //if (height < $('body').height()) {
                       //    imgContainerTop = ($('body').height() - height) / 2.0;
                       //}
                       //$('#imgContainer').css('left', imgContainerLeft);
                       //$('#imgContainer').css('top', imgContainerTop);
                       if(!$('#imgContainer').hasClass('imgoverflow')){
                         $('#imgContainer').addClass('imgoverflow');
                       }
                       $('.imgareaselect-outer').each(function () {
                           var style = $(this).attr('style');
                           var displayIndex = style.toLowerCase().indexOf('display: block;');
                           if (displayIndex != -1) {
                               var str1 = style.slice(0, displayIndex);
                               var str2 = style.slice(displayIndex+'display: block;'.length);
                               style = str1.concat(str2);
                               $(this).attr('style', style);
                           }
                       });
                       window.print();
                       $('#selectedImg').css('left', 'auto')
                       $('#selectedImg').css('top', 'auto');
                       //$('#imgContainer').css('left', '10px;');
                       //$('#imgContainer').css('top', '10px');
                       $('#imgContainer').css('width', 'auto');
                       $('#imgContainer').css('height', 'auto');
                       if ($('#imgContainer').hasClass('imgoverflow')) {
                           $('#imgContainer').removeClass('imgoverflow');
                       }
                       $("#rightMenu").show();//???
                       return;
                   }
               }
               if ($('#imgContainer').hasClass('imgoverflow')) {
                   $('#imgContainer').removeClass('imgoverflow');
               }
               window.print();
               return;
           }
           catch (e) {
               alert(e.Message);
               window.location.reload();
               return;
           }
        }
   </script>
</head>
<body>
    <div>
        <div id="topDiv">
           <div id="imgContainer" style = "position:absolute; left:10px; top:10px; ">
                <asp:Image ID="selectedImg" runat="server" style=" position:relative;"/>
           </div> 
        </div>
    </div>
    <div id="rightMenu" style="display: block; position: fixed; z-index: 999;display:none;" class="noprint">
        <div><button type="button" id="btnZoomOut" class="sexybutton" onclick="zoomOut();"><span><span><span class="up">放&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大</span></span></span></button></div>
        <div><button type="button" id="btnZoomIn" class="sexybutton" onclick="zoomIn();"><span><span><span class="down">缩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小</span></span></span></button></div>
        <div><button type="button" id="btnOriginalSize" class="sexybutton" onclick="zoomOriginal();"><span><span><span class="export">原始大小</span></span></span></button></div>
        <div><button type="button" id="btnPrint" class="sexybutton" onclick="printSelectedImg();"><span><span><span class="disk">打&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;印</span></span></span></button></div>
    </div>
</body>
</html>
